<template>
  <!-- <div class="home"> -->
  <!-- <div class="title">
      <p>系统首页</p>
    </div> -->
  <div class="home">
    <div class="statistics row">
      <div
        v-show="corpFlag"
        class="statistics-item btn_labor-service"
        @click="toServiceSompanynums"
      >
        <!-- <i class="el-icon-s-order"></i> -->
        <!-- <img class="statistics-icon" src="./static/icon-file.png" /> -->
        <!-- 租户数量 -->
        <div class="statistics-name">
          <div class="name-tag">劳务公司数</div>
          <div class="name-num">{{titleData.corpNum}}</div>
          家
        </div>
      </div>
      <div class="statistics-item btn_team" @click="toTeamManagement">
        <!-- <i class="el-icon-s-order"></i> -->
        <!-- <img class="statistics-icon" src="./static/icon-file.png" /> -->
        <!-- 租户数量 -->
        <div class="statistics-name">
          <div class="name-tag">班组数量</div>
          <div class="name-num">{{titleData.teamNum}}</div> 组
        </div>
      </div>
      <div
        class="statistics-item btn_total-staff"
        @click="toPersonnelManagement"
      >
        <!-- <i class="el-icon-s-order"></i> -->
        <!-- <img class="statistics-icon" src="./static/icon-file.png" /> -->
        <!-- 租户数量 -->
        <div class="statistics-name">
          <div class="name-tag">总人员数量</div>
          <div class="name-num">{{titleData.personNum}}</div> 人
        </div>
      </div>
      <div class="statistics-item btn_request-funds" @click="toRequest">
        <!-- <i class="el-icon-s-order"></i> -->
        <!-- <img class="statistics-icon" src="./static/icon-file.png" /> -->
        <!-- 租户数量 -->
        <div class="statistics-name">
          <div class="name-tag">请款次数</div>
          <div class="name-num">0</div> 次
        </div>
      </div>
      <div class="statistics-item btn_clock-in" @click="toDayAttendance">
        <!-- <i class="el-icon-s-order"></i> -->
        <!-- <img class="statistics-icon" src="./static/icon-file.png" /> -->
        <!-- 租户数量 -->
        <div class="statistics-name">
          <div class="name-tag">昨日打卡人数</div>
          <div class="name-num">{{titleData.attendanceNumYesterday}}</div> 人
        </div>
      </div>
      <div
        class="statistics-item btn_attendance-number"
        @click="toMonthAttendance"
      >
        <!-- <i class="el-icon-s-order"></i> -->
        <!-- <img class="statistics-icon" src="./static/icon-file.png" /> -->
        <!-- 租户数量 -->
        <div class="statistics-name">
          <div class="name-tag">上月考勤人数</div>
          <div class="name-num">{{titleData.attendanceNumLastMonth}}</div> 人
        </div>
      </div>
      <div class="statistics-item btn_yesterday-wages" @click="toDayWage">
        <!-- <i class="el-icon-s-order"></i> -->
        <!-- <img class="statistics-icon" src="./static/icon-file.png" /> -->
        <!-- 租户数量 -->
        <div class="statistics-name">
          <div class="name-tag">昨日工资数</div>
          <div class="name-num">0</div> 人
        </div>
      </div>
      <div class="statistics-item btn_monthly-wages" @click="toMonthWage">
        <!-- <i class="el-icon-s-order"></i> -->
        <!-- <img class="statistics-icon" src="./static/icon-file.png" /> -->
        <!-- 租户数量 -->
        <div class="statistics-name">
          <div class="name-tag">月工资确认数</div>
          <div class="name-num">0</div> 人
        </div>
      </div>
      <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    </div>
    <el-row type="flex" >
      <el-col :span="18" :sm="22" :md="20" :lg="18" :xl="18">
        <div class="home-frame-left row">
          <div class="home-frame-item">
            <div class="home-tag">快捷入口</div>
            <div class="quickentry row">
              <div class="quickentry-item cloum" @click="toPersonnelImport">
                <img class="quickentry-item-icon" src="./static/quick/person.png" />
                <p>人员导入</p>
              </div>
              <div class="quickentry-item cloum" >
                <a :href="'/static/attendance.xlsx'">
                  <img
                    class="quickentry-item-icon"
                    src="./static/quick/import.png"
                  />
                  <p>人员导入模板下载</p>
                </a>
              </div>
              <div class="quickentry-item cloum" @click="toDAttendanceImport">
                <img class="quickentry-item-icon" src="./static/quick/daily.png" />
                <p>日考勤导入</p>
              </div>
              <!-- <div class="quickentry-item cloum" @click="toMAttendanceImport">
                <img class="quickentry-item-icon" src="./static/quick/month.png" />
                <p>月考勤导入</p>
              </div> -->
              <div class="quickentry-item cloum" @click="toAttendanceTemplate">
                <img
                  class="quickentry-item-icon"
                  src="./static/quick/template.png"
                />
                <p>考勤模板下载</p>
              </div>
              <div class="quickentry-item cloum" @click="toDayAttendance">
                <img
                  class="quickentry-item-icon"
                  src="./static/quick/daily_attendance.png"
                />
                <p>日考勤统计</p>
              </div>
              <div class="quickentry-item cloum" @click="toMonthAttendance">
                <img
                  class="quickentry-item-icon"
                  src="./static/quick/month_attendance.png"
                />
                <p>月考勤统计</p>
              </div>
              <div class="quickentry-item cloum" @click="toDayWage">
                <img
                  class="quickentry-item-icon"
                  src="./static/quick/daily_salary.png"
                />
                <p>日工资统计</p>
              </div>
              <div class="quickentry-item cloum" @click="toMonthWage">
                <img
                  class="quickentry-item-icon"
                  src="./static/quick/month_salary.png"
                />
                <p>月工资统计</p>
              </div>
              <div class="quickentry-item cloum" @click="toRequest">
                <img class="quickentry-item-icon" src="./static/quick/refund.png" />
                <p>请款申请</p>
              </div>
              <div class="quickentry-item cloum" @click="toSetUpAccount">
                <img
                  class="quickentry-item-icon"
                  src="./static/quick/bankcard.png"
                />
                <p>银行卡开户</p>
              </div>
            </div>
          </div>
          <div class="home-frame-item">
            <div class="home-tag">请款使用明细</div>
            <div class="summarygraph white" ref="echarts_detail"></div>
          </div>
          <div class="home-frame-item">
            <div class="home-tag">考勤统计</div>
            <div class="summarygraph row">
              <div class="left-statistics">
                <div class="statistics-item" style="padding-left: 0;">
                  本月考勤人数
                  <div style="font-size: 30px; color: #666666">10000</div>
                  <div class="trend row">
                    <img style="width: 10px" src="./static//rise.png" />
                    <div style="width: 30px; margin-left: 5px; color: #1abc9c">
                      10%
                    </div>
                    <div style="color: #cccccc">同比上周</div>
                  </div>
                </div>
                <div class="statistics-item" style="padding-left: 0;">
                  本月考勤人数
                  <div style="font-size: 30px; color: #666666">10000</div>
                  <div class="trend row">
                    <img style="width: 10px" src="./static//decline.png" />
                    <div style="width: 30px; margin-left: 5px; color: #f04844">
                      10%
                    </div>
                    <div style="color: #cccccc">同比上周</div>
                  </div>
                </div>
              </div>
              <div class="right-chart" ref="echarts_attendance"></div>
            </div>
          </div>
          <div class="home-frame-item">
            <div class="home-tag">工资发放统计</div>
            <div class="summarygraph row">
              <div class="left-statistics">
                <div class="statistics-item" style="padding-left: 0;">
                  本月考勤人数
                  <div style="font-size: 30px; color: #666666">10000</div>
                  <div class="trend row">
                    <img style="width: 10px" src="./static//rise.png" />
                    <div style="width: 30px; margin-left: 5px; color: #1abc9c">
                      10%
                    </div>
                    <div style="color: #cccccc">同比上周</div>
                  </div>
                </div>
                <div class="statistics-item" style="padding-left: 0;">
                  本月考勤人数
                  <div style="font-size: 30px; color: #666666">10000</div>
                  <div class="trend row">
                    <img style="width: 10px" src="./static//decline.png" />
                    <div style="width: 30px; margin-left: 5px; color: #f04844">
                      10%
                    </div>
                    <div style="color: #cccccc">同比上周</div>
                  </div>
                </div>
              </div>
              <div class="right-chart" ref="echarts_wage"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col
        :span="6"
        :sm="2"
        :md="4"
        :lg="6"
        :xl="6"
        style="min-height: 100%"
      >
        <div class="home-frame-right white">
          <div class="home-tag">待处理事务</div>
          <div class="pending">
            <div
              class="pending-item row"
              v-for="item in pendingList1"
              :key="item.name"
              @click="toPage(item.link)"
            >
              <div class="left">{{ item.name }}</div>
              <div class="right">
                (
                <div id="pending-num">{{ format(item.num) }}</div>
                )
              </div>
            </div>
            <div
              class="pending-item row"
              v-for="item in pendingList2"
              :key="item.name"
              @click="toPage(item.link)"
            >
              <div class="left">{{ item.name }}</div>
              <div class="right">
                (
                <div id="pending-num">{{ format(item.num) }}</div>
                )
              </div>
            </div>
            <div
              class="pending-item row"
              v-for="item in pendingList3"
              :key="item.name"
              @click="toPage(item.link)"
            >
              <div class="left">{{ item.name }}</div>
              <div class="right">
                ( <div id="pending-num">{{ format(item.num) }}</div> )
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- </div> -->
</template>

<script>
import tenantApi from "@/api/home/tenant.js"
export default {
  data() {
    return {
      corpFlag: true,
      titleData: {
        corpNum: 0,
        teamNum: 0,
        personNum: 0,
        attendanceNumYesterday: 0,
        attendanceNumLastMonth: 0
      },
      //   待处理事务
      pendingList1: [
        {
          name: "待确认日考勤单",
          num: 0,
          link: "toDayAttendance",
        },
        {
          name: "待确认月考勤单",
          num: 0,
          link: "toMonthAttendance",
        },
        {
          name: "待提交日工资单",
          num: 0,
          link: "toMySubmitDayWage",
        },
        {
          name: "待审核日工资单",
          num: 0,
          link: "toDayWageApproval",
        },
        {
          name: "抄送我的日工资单",
          num: 0,
          link: "toMyDayWage",
        },
      ],
      pendingList2: [
        {
          name: "待核算日工资",
          num: 0,
          link: "toDayWage",
        },
        {
          name: "待核算月工资",
          num: 0,
          link: "toMonthWage",
        },
        {
          name: "待提交月工资单",
          num: 0,
          link: "toMySubmitMonthWage",
        },
        {
          name: "待审核月工资单",
          num: 0,
          link: "toMonthWageApproval",
        },
        {
          name: "抄送我的月工资单",
          num: 0,
          link: "toMyMonthWage",
        },
      ],
      pendingList3: [
        {
          name: "待确认日工资",
          num: 0,
          link: "toDayConfirmWage",
        },
        {
          name: "待确认月工资",
          num: 0,
          link: "toMonthConfirmWage",
        },
        {
          name: "待开户人员",
          num: 0,
          link: "toSetUpAccount",
        },
      ],
      detailChart: "",
      attendanceChart: "",
      wageChart: "",
      exampleChart: "",
      months: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      appropriation: [
        10395, 12540, 15510, 13992, 11550, 12573, 10230, 13530, 14157, 13649,
        12441, 14586,
      ],
      actual: [
        10000, 9000, 12000, 13000, 11000, 12000, 10000, 12000, 10000, 13000,
        12000, 14000,
      ],
      dayAttendance: [
        "00:00",
        "01:00",
        "02:00",
        "03:00",
        "04:00",
        "05:00",
        "06:00",
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00",
      ],
      weeklyAttendance: [
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "周日",
      ],
      yearAttendance: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      dayCount: [
        100, 200, 150, 300, 420, 130, 150, 220, 350, 460, 110, 120, 130,
      ],
    };
  },
  created() {
    this.getTitileData()
    // console.log(localStorage.getItem("projectId"));
  },
  mounted() {
    this.echartsInit();
    window.onresize = () => {
      this.detailChart.resize();
      this.wageChart.resize();
      this.attendanceChart.resize();
    };
  },
   destroyed() {
    window.onresize = null;
  },
  methods: {
    getTitileData() {
      this.judgeCorp()
    },
    getCorpNum() {
      tenantApi.getCorpNum().then(res => {
        this.titleData.corpNum = res.data.data
      })
    },
    getTeamNum() {
      tenantApi.getTeamNum().then(res => {
        this.titleData.teamNum = res.data.data
      })
    },
    getPersonNumByProIdAndCorpId() {
      tenantApi.getPersonNumByProIdAndCorpId().then(res => {
        this.titleData.personNum = res.data.data
      })
    }, 
    judgeCorp() {
      let companyId = localStorage.getItem("companyId")
      this.corpFlag = companyId == undefined

      console.log(this.corpFlag);
      if(this.corpFlag) {
        this.getCorpNum()
      }
      this.getTeamNum()
      this.getPersonNumByProIdAndCorpId()
      this.getAttendanceNumYesterday()
      this.getAttendanceNumLastMonth()
      this.getWaitDailyAttendanceNum()
      this.getWaitMonthlyAttendanceNum()
      this.getWaitDailyWageNum()
    },
    getAttendanceNumYesterday() {
      tenantApi.getAttendanceNumYesterday().then(res => {
          this.titleData.attendanceNumYesterday = res.data.data
      })
    },
    getAttendanceNumLastMonth() {
      tenantApi.getAttendanceNumLastMonth().then(res => {
          this.titleData.attendanceNumLastMonth = res.data.data
      })
    },
    getWaitDailyAttendanceNum(){
      tenantApi.getWaitDailyAttendanceNum().then(res=>{
        this.pendingList1[0].num = res.data.data
      })
    },
    getWaitMonthlyAttendanceNum(){
      tenantApi.getWaitMonthlyAttendanceNum().then(res=>{
        this.pendingList1[1].num = res.data.data
      })
    },
    getWaitDailyWageNum(){
      tenantApi.getWaitDailyWageNum().then(res=>{
        this.pendingList3[0].num = res.data.data
      })
    },
    toPage(link) {
      if (link == "toDayAttendance") {
        this.toDayAttendance();
      } else if (link == "toMonthAttendance") {
        this.toMonthAttendance();
      } else if (link == "toMySubmitDayWage") {
        this.toMySubmitDayWage();
      } else if (link == "toDayWageApproval") {
        this.toDayWageApproval();
      } else if (link == "toMyDayWage") {
        this.toMyDayWage();
      } else if (link == "toDayWage") {
        this.toDayWage();
      } else if (link == "toMonthWage") {
        this.toMonthWage();
      } else if (link == "toMySubmitMonthWage") {
        this.toMySubmitMonthWage();
      } else if (link == "toMonthWageApproval") {
        this.toMonthWageApproval();
      } else if (link == "toMyMonthWage") {
        this.toMyMonthWage();
      } else if (link == "toDayConfirmWage") {
        this.toDayConfirmWage();
      } else if (link == "toMonthConfirmWage") {
        this.toMonthConfirmWage();
      } else {
        this.toSetUpAccount();
      }
    },
    toMyDayWage() {
      console.log("进入抄送我的日工资单子页面");
    },
    toMyMonthWage() {
      console.log("进入抄送我的月工资单子页面");
    },
    toDayWageApproval() {
      console.log("日工资审批");
    },
    toMonthWageApproval() {
      console.log("月工资审批");
    },
    toMySubmitDayWage() {
      console.log("我的提交日工资");
    },
    toMySubmitMonthWage() {
      console.log("我的提交月工资");
    },
    toDayConfirmWage() {
      console.log("日工资确认");
    },
    toMonthConfirmWage() {
      console.log("月工资确认");
    },
    toSetUpAccount() {
      this.$router.push({ path: "/bank/bankcard" });
      console.log("银行开户");
    },
    toPersonnelImport() {
      this.$router.push({ path: "/worker/add" });
      console.log("人员导入");
    },
    toPImportTemplate() {
      console.log("人员导入模板");
    },
    toDAttendanceImport() {
      this.$router.push({ path: "/attendance/daily/import" });
      console.log("日考勤导入");
    },
    toMAttendanceImport() {
      // this.$router.push({ path: "/attendance/month/import" });
      console.log("月考勤导入");
    },
    toAttendanceTemplate() {
      console.log("考勤模板");
    },
    toServiceSompanynums: () => {
      console.log("点击劳务公司数量，进入劳务公司管理子页面");
    },
    toTeamManagement: () => {
      console.log("点击班组数量，进入班组管理子页面");
    },
    toPersonnelManagement: () => {
      console.log("点击总人员数量，进入人员管理子页面");
    },
    toRequest: () => {
      console.log("请款次数，进入请款子页面");
    },
    toDayAttendance() {
      this.$router.push({ path: "/attendance/daily/statistic" });
      console.log("点击昨日打卡人数，进入日考勤统计子页面");
    },
    toMonthAttendance(){
      this.$router.push({ path: "/attendance/month/statistic" });
      console.log("点击上月考勤人数，进入月考勤统计子页面");
    },
    toDayWage(){
      this.$router.push({ path: "/wage/daily/statistic" });
      console.log("点击昨日工资确认人数，进入日工资确认子页面");
    },
    toMonthWage() {
      this.$router.push({ path: "/wage/month/statistic" });
      console.log("点击月工资确认人数，进入月工资确认子页面");
    },
    format: (num) => {
      if (num >= 10) return num + "";
      else return "0" + num;
    },
    echartsInit() {
      //柱形图
      //因为初始化echarts 的时候，需要指定的容器 id='tenantsNum'
      // this.$echarts.init(document.getElementById('tenantsNum'))
      //   this.exampleChart = this.$echarts.init(this.$refs.echarts_example);
      this.detailChart = this.$echarts.init(this.$refs.echarts_detail);
      this.attendanceChart = this.$echarts.init(this.$refs.echarts_attendance);
      this.wageChart = this.$echarts.init(this.$refs.echarts_wage);
      // 请款使用明细
      const detailOption = {
        xAxis: {
          type: "category",
          data: this.months,
          axisLine: {
            lineStyle: {
              color: "#999999",
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, //不显示坐标轴刻度线
          },
          axisLine: {
            show: false, //不显示坐标轴线
            lineStyle: {
              color: "#999999",
            },
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
            },
          },
        },
        series: [
          {
            name: "请款：",
            data: this.appropriation,
            type: "bar",
            barGap: "-100%",
            barWidth: 30,
            itemStyle: {
              normal: {
                barBorderRadius: [32, 0, 32, 32],
                color: "#D0E9FF",
              },
            },
          },
          {
            name: "实际：",
            data: this.actual,
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                barBorderRadius: [32, 0, 32, 32],
                color: "#3A9CFF",
              },
            },
          },
        ],
      };
      // 考勤人员统计
      const attendanceOption = {
        title: {
          left: "left",
          text: "考勤人员统计",
          textStyle: {
            fontSize: 12,
            color: "#989898",
            fontWeight: "normal",
            lineHeight: 50,
          },
        },
        legend: {
          data: ["今日", "本周", "本年"],
          y: "5%",
          x: "65 %",
          selectedMode: "single",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        xAxis: {
          type: "category",
          data: this.dayAttendance,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#999999",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLine: {
              show: false, //不显示坐标轴线
              lineStyle: {
                color: "#999999",
              },
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
              },
            },
          },
        ],
        series: [
          {
            name: "今日",
            data: this.dayCount,
            type: "line",
            symbolSize: 8,
            smooth: true,
            // areaStyle: {},
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              normal: {
                color: "#80C5F4",
                borderWidth: 3,
              },
            },
          },
          {
            name: "本周",
            data: this.actual,
            type: "line",
            symbolSize: 8,
            smooth: true,
            // areaStyle: {},
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              normal: {
                color: "#80C5F4",
                borderWidth: 3,
              },
            },
          },
          {
            name: "本年",
            data: this.appropriation,
            type: "line",
            symbolSize: 8,
            smooth: true,
            // areaStyle: {},
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              normal: {
                color: "#80C5F4",
                borderWidth: 3,
              },
            },
          },
        ],
      };
      // 工资发放统计
      const wageOption = {
        title: {
          left: "left",
          text: "工资发放统计",
          textStyle: {
            fontSize: 12,
            color: "#989898",
            fontWeight: "normal",
            lineHeight: 50,
          },
        },
        legend: {
          data: ["今日", "本周", "本年"],
          y: "5%",
          x: "65 %",
          selectedMode: "single",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        xAxis: {
          type: "category",
          data: this.dayAttendance,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#999999",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLine: {
              show: false, //不显示坐标轴线
              lineStyle: {
                color: "#999999",
              },
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
              },
            },
          },
        ],
        series: [
          {
            name: "今日",
            data: this.dayCount,
            type: "line",
            type: "line",
            symbolSize: 8,
            smooth: true,
            // areaStyle: {},
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              normal: {
                color: "#80C5F4",
                borderWidth: 3,
              },
            },
          },
          {
            name: "本周",
            data: this.actual,
            type: "line",
            symbolSize: 8,
            smooth: true,
            // areaStyle: {},
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              normal: {
                color: "#80C5F4",
                borderWidth: 3,
              },
            },
          },
          {
            name: "本年",
            data: this.appropriation,
            type: "line",
            symbolSize: 8,
            smooth: true,
            // areaStyle: {},
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              normal: {
                color: "#80C5F4",
                borderWidth: 3,
              },
            },
          },
        ],
      };
      this.attendanceChart.on("legendselectchanged", (obj) => {
        var name = obj.name;
        // console.log(obj)
        var option = attendanceOption;
        if (name == "今日") {
          option.xAxis.data = this.dayAttendance;
          // console.log(option.xAxis)
        } else if (name == "本周") {
          option.xAxis.data = this.weeklyAttendance;
          // console.log(option.xAxis)
        } else if (name == "本年") {
          option.xAxis.data = this.months;
        }
        this.attendanceChart.setOption(option);
      });
      this.wageChart.on("legendselectchanged", (obj) => {
        var name = obj.name;
        // console.log(obj)
        var option = wageOption;
        if (name == "今日") {
          option.xAxis.data = this.dayAttendance;
          // console.log(option.xAxis)
        } else if (name == "本周") {
          option.xAxis.data = this.weeklyAttendance;
          // console.log(option.xAxis)
        } else if (name == "本年") {
          option.xAxis.data = this.months;
        }
        this.wageChart.setOption(option);
      });
      this.detailChart.setOption(detailOption);
      this.attendanceChart.setOption(attendanceOption);
      this.wageChart.setOption(wageOption);
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
html,
body,
#app {
  height: 100%;
}

.home {
  min-height: 100%;
  /* width: 1200px; */
  width: 100%;
  /* background-color: #E6E6E6; */
  /* margin: 0 auto; */
}
.title {
  text-align: left;
  width: 100%;
  padding-left: 20px;
  border: solid 1px #e4e4e4;
  height: 55px;
  line-height: 20px;
  background-color: #f3f3f3;
  color: #999999;
  padding-top: 20px;
  padding-left: 20%;
}

.title p {
  height: 20px;
  margin: 0;
  padding-left: 5px;
  border-left: solid 3px #1abc9c;
}

.row {
  display: flex;
  flex-direction: row;
  // border-radius: 10px;
}

.cloum {
  display: flex;
  flex-direction: column;
}

.statistics {
  justify-content: space-between;
  min-height: 100px;
  width: 100%;
  flex-wrap: wrap;
  margin-left: 10px;
  margin-right: -10px;
  // align-content: flex-start;
  // &::after{
  //   content: '';
  //   flex: left;
  // }
}
.statistics >i{
  width: 200px;
  margin-right: 10px;
}
.statistics-item {
  width: 200px;
  min-width: 122px;
  height: 90px;
  background-size: 100% 100%;
  // background-color: #ffffff;
  padding-left: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: left;
  position: relative;
  color: #ffffff;
  padding-top: 15px;
  // flex-grow:1;
}
.btn_labor-service {
  background-image: url("./static/btn_labor-service.png");
}
.btn_team {
  background-image: url("./static/btn_team.png");
}
.btn_total-staff {
  background-image: url("./static/btn_total-staff.png");
}
.btn_request-funds {
  background-image: url("./static/btn_request-funds.png");
}
.btn_clock-in {
  background-image: url("./static/btn_clock-in.png");
}
.btn_attendance-number {
  background-image: url("./static/btn_attendance-number.png");
}
.btn_yesterday-wages {
  background-image: url("./static/btn_yesterday-wages.png");
}
.btn_monthly-wages {
  background-image: url("./static/btn_monthly-wages.png");
}
.statistics-item:hover {
  cursor: pointer;
}

// .statistics-icon {
//   width: 70px;
//   height: 70px;
//   /* margin-left: 5px; */
// }

.statistics-name {
  width: 100%;
  font-size: 18px;
  line-height: 25px;
  // height: 80%;
  // position: absolute;
  // left: 80px;
  // top: 20%;
  // left: 35%;
  /* display: flex;
    flex-direction: column;
    display: inline-block; */
}

// .name-tag {
//   color: #999999;
// }

.name-num {
  font-size: 30px;
  // color: #666666;
  display: inline-block;
  word-wrap: break-word;
  word-break: break-all;
  line-height: 35px;
}

.home-tag {
  font-size: 16px;
  font-family: "Pingfang SC";
  height: 50px;
  line-height: 50px;
  color: #333333;
  border-bottom: solid 3px #e8e8e8;
  padding-left: 15px;
  text-align: left;
  background-color: #ffffff;
  width: 100%;
  // margin-top: 20px;
}

.home-frame-left {
  margin: 10px 0 10px 10px;
  border-radius: 5px 5px 5px;
  flex-wrap: wrap;
  .home-frame-item {
    border-radius: 5px 5px 5px;
    width: 600px;
    min-height: 400px;
    margin: 10px;
    flex-grow: 1;
    background-color: #ffffff;
    .quickentry {
      flex-wrap: wrap;
      // background-color: #ffffff;
      min-height: 100px;
      // justify-content: space-between;
      align-content: flex-start;
      padding-top: 20px;
      // flex-grow: 1;
    }
    .quickentry-item {
      font-size: 12px;
      text-align: center;
      width: 15%;
      // height: 100px;
      // align-content:center;
      align-items: center;
      // flex-grow: 1;
    }

    .quickentry-item:hover {
      background-color: #f9f9f9;
      cursor: pointer;
    }

    .quickentry-item:hover p {
      color: #1abc9c;
    }

    .quickentry-item p {
      margin-top: 10px;
      align-items: center;
      justify-content: center;
    }
    .quickentry-item-icon {
      width: 60px;
      height: 60px;
      align-items: center;
      justify-content: center;
    }
    .summarygraph {
      height: 400px;
      width: 100%;
      text-align: center;
      // border-radius: 15px 15px 15px;
      /* background-color: gray; */
      /* margin-bottom: 20px; */
      /* border: solid 1px #E4E4E4; */
      border-radius: 5px;
    }
  }
}

.home-frame-right {
  width: calc(100% - 10px);
  min-height: calc(100% - 40px);
  margin: 20px 20px 20px 10px;
  .pending {
    min-height: 100%;
    width: 100%;
    // padding-bottom: 20px;
    // padding-left: 20px;
    // padding-right: 20px;
  }
  .pending-item {
    width: 100%;
    height: 50px;
    line-height: 65px;
    margin-right: 20px;
    padding-left: 15px;
    border-bottom: solid 1px #f2f2f2;
    font-size: 13px;
    /* margin-left: 20px; */
    /* color: black; */
  }

  .pending-item :hover {
    color: #1abc9c;
    cursor: pointer;
  }

  .pending-item :hover #pending-num {
    color: #1abc9c;
  }

  .pending-item .left {
    width: calc(100% - 50px);
  }
  .pending-item .right {
    width: 35px;
  }

  .pending-item .right div {
    display: inline-block;
    color: red;
  }
}

.white {
  background-color: #ffffff;
}

.summarygraph .left-statistics {
  width: 18%;
  padding: 20px 20px;
  border-right: solid 1px #ebebeb;
  margin-right: 10px;
}

.left-statistics .statistics-item {
  width: 90%;
  font-size: 10px;
  color: #989898;
}

.summarygraph .right-chart {
  height: 100%;
  width: 82%;
}
</style>